<template>
	<div class="about">
		<div class="wrap-full">
			<!-- 版纳图 -->
			<div class="page-top-img">
				<img src="../assets/img/2018060508465730487.jpg" class="show-other" alt="" title="">
			</div>
			<!-- 住宿标题 -->
			<div class="wrap">
				<div class="title-block">
					<div>影集</div>
				</div>

				<ul class="page-nav">
					<li><a href="/">首页 &gt;</a></li>
					<li><a href="/web/vacation/holidaylist">互动体验 &gt;</a></li>
					<li class="active"><a href="#">影集 &gt;</a></li>
				</ul>

			</div>
		</div>

		<!-- 视频 -->
		<div class="xuanchuan">
			<div class="">
				<video controls="" preload="none" width="1400" height="600"
					src="http://www.wuzhen.com.cn/ueditor/php/upload/video/20180602/70813fff449a6bfaa76ac447303d620e.mp4"
					id="_mv" draggable="true" poster="http://www.wuzhen.com.cn/uploads/album/2019082211445440791.jpg"
					style="background-color: #000000;">
				</video>
			</div>
			<div class="xuanchuanp">
				<h4>宣传片</h4>
				<div class="videos">
					
					<div class="video-box" v-for="(item,index) in list1" :key="item">
						<div class="box-img" @mouseenter="show(index)" @mouseleave="hide(index)">
							<img :src="item.img">
							<transition name="fade">
							<div class="zezhao" v-show="lue&&int==index">
								<img :src="item.url">
							</div>
							</transition>
						</div>

						<h5>
							<img src="http://www.wuzhen.com.cn/resource/web/images/Combined%20Shape.png">
							<span :title="item.title">{{item.title}}</span>
						</h5>

					</div>
					
				</div>

			</div>

		</div>

		<!-- 记录片 -->
		<div class="jilu">
			<div class="xuanchuanp">
				<h4>纪录片</h4>
				<div class="videos">
					<div class="video-box" v-for="(item,index) in list2" :key="item">
						<div class="box-img" @mouseenter="show(index)" @mouseleave="hide(index)">
							<img :src="item.img">
							<transition name="fade">
							<div class="zezhao" v-show="lue&&int==index">
								<img :src="item.url">
							</div>
							</transition>
						</div>

						<h5>
							<img src="http://www.wuzhen.com.cn/resource/web/images/Combined%20Shape.png">
							<span :title="item.title">{{item.title}}</span>
						</h5>

					</div>

				</div>

			</div>
		</div>

	</div>
</template>
s<script type="text/javascript">
	export default {
		data() {
			return {
				lue: false,
				int: 0,
				list1: [{
						title: "心的乌镇，来过 未曾离开",
						img: "http://www.wuzhen.com.cn/uploads/album/2019100415013506231.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "文化乌镇宣传片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715173527192.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2014年第二届乌镇戏剧节宣传短片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715532476499.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2015乌镇戏剧节宣传片赖声川",
						img: "http://www.wuzhen.com.cn/uploads/album/2020120815184650160.png",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2015乌镇戏剧节宣传片孟京辉",
						img: "http://www.wuzhen.com.cn/uploads/album/2020120815192442670.png",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2015乌镇戏剧节宣传片黄磊",
						img: "http://www.wuzhen.com.cn/uploads/album/2020120815194859359.png",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "首届世界互联网大会乌镇峰会",
						img: "	http://www.wuzhen.com.cn/uploads/album/2017122715592963691.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "乌镇宣传片",
						img: "http://www.wuzhen.com.cn/uploads/album/2018060215374446107.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "刘若英谈重游乌镇想在乌镇大剧院开唱",
						img: "http://www.wuzhen.com.cn/uploads/album/2018060215395535700.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "第三届世界互联网大会",
						img: "http://www.wuzhen.com.cn/uploads/album/2018060215432379959.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2021乌镇“无尽夏”生活节",
						img: "http://www.wuzhen.com.cn/uploads/album/2021071713184824438.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					}
				],
				list2: [{
						title: "第四届乌镇戏剧节闭幕式短片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715315883462.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png",
						log: "http://www.wuzhen.com.cn/resource/web/images/Combined%20Shape.png"
					},
					{
						title: "乌镇戏剧节5周年短片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715272923408.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2017第五届乌镇戏剧节特邀剧目集锦",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715293390111.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "2016第四届乌镇戏剧节开幕短片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715434489494.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "乌镇国际当代艺术邀请展先导概念片",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122715472786359.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					},
					{
						title: "陈向宏讲乌村保护规划",
						img: "http://www.wuzhen.com.cn/uploads/album/2017122716015222566.jpg",
						url: "http://www.wuzhen.com.cn/resource/web/images/bofang.png"
					}
				]
			}
		},
		methods: {
			show: function(index) {
				this.lue = true;
				this.int = index;
			},
			hide: function(index) {
				this.lue = false;
				this.int = null
			}
		}




	}
</script>


<style type="text/css" scoped="scoped">
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.fade-enter-active {
		animation: fadeIn ease 0.7s;
	}

	.fade-leave-active {
		animation: fadeOut ease 0.7s;
	}

	.wrap-full {
		width: 100%;
	}

	.page-top-img {
		width: 1920px;
		height: 100%;
		margin: 0 auto;
	}

	.page-top-img img {
		width: 100%;
	}

	.wrap {
		width: 1400px;
		margin: 0 auto;
	}

	.title-block {
		padding: 7px;
		width: 355px;
		margin-top: -90px;
		z-index: 500;
		position: relative;
		background: rgba(39, 40, 49, 0.75);
	}

	.title-block div {
		border: solid 2px #ffffff;
		line-height: 100px;
		padding-left: 20px;
		font-size: 42px;
		color: #FFFFFF;
		letter-spacing: 0.6px;

	}

	.page-nav {
		display: flex;
		border-bottom: 1px solid #D5DAE1;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.page-nav li a {
		font-size: 14px;
		color: #7E808A;
		margin-right: 10px;
	}

	/* 宣传 */
	.xuanchuan {
		padding-top: 50px;
		width: 1400px;
		margin: 0 auto;
	}

	.xuanchuanp {
		width: 1400px;
		margin: 0 auto;
	}

	.xuanchuanp h4 {
		font-size: 36px;
		color: #272831;
		letter-spacing: 1.29px;
		font-weight: normal;
		padding: 64px 0 48px 0;
	}

	.videos {
		display: flex;
		flex-wrap: wrap;
	}

	.video-box {
		width: 400px;
		margin-right: 100px;
		margin-bottom: 64px;
	}

	.video-box:nth-of-type(3n) {
		margin-right: 0;
	}

	.box-img {
		position: relative;
		width: 400px;
		height: 250px;
	}


	.box-img>img {
		width: 400px;
		height: 250px;
	}

	.zezhao {
		width: 400px;
		height: 250px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(39, 40, 49, 0.60);
		z-index: 50;
	}

	.zezhao img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.video-box h5 {
		margin-top: 20px;
		font-weight: normal;
		display: flex;
		align-items: center;
	}


	.video-box h5 span {
		margin-left: 10px;
		font-size: 24px;
		color: #272831;
		letter-spacing: 0.8px;
		line-height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.jilu {
		width: 100%;
		background-color: #F3F4F8;
	}
</style>
